<template>
  <div>
    <!-- 单向绑定 和 双向绑定 -->
    <!-- 单向绑定 v-bind可以绑定标签的属性，通过数据控制属性，data的修改会影响界面的渲染 -->
    <input type="text" v-bind:class="className" v-bind:style="style" v-bind:name="name" v-bind:value="name">
    <!-- 使用:进行简写   -->
    <input type="text" :class="className" :style="style" :name="name" :value="name">
    <button @click="changeData">修改数据</button>
    <hr>
    <input type="text" v-model="text">
    <input type="text" v-model="text">
    <select name="select" v-model="selectType">
      <option value="+">+</option>
      <option value="-">-</option>
    </select>
    <div>{{text}}</div>
    <div>{{selectType}}</div>
  </div>
</template>

<script>
export default {
  name: "ModelTest",
  data() {
    return {
      selectType:"+",
      text: "",
      name: "张三",
      // 针对样式的绑定，是多样的
      // className:"title body",
      className: ["title", "body"],
      style: {
        color: "red",
        textAlign: "center"
      }
    }
  },
  methods: {
    changeData() {
      this.name = this.name + "测试"
      this.className = "body"
    }
  }
}
</script>

<style scoped>
.title {
  background-color: red;
}

.body {
  font-size: 30px;
  background-color: lightblue;
}
</style>
